<template>
  <div>
    <van-nav-bar
      title="我的购物车"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>

    <van-cell title-class="name" label-class="dz" to='/address' :title="'收货人:'+people" :label="'收货地址:'+addr" icon="location-o" >
    </van-cell>

    <van-checkbox-group v-model="result">
      <van-checkbox :label-disabled='true' v-for="(item,index) in list" class="ico" :name="item" icon-size="18px" checked-color="#fb8477">
        <van-card
          :price="item.product.price"
          :desc="item.product.descriptions"
          :title="item.product.name"
          :thumb="item.product.coverImg"
          class="pro"
        >
        <div slot='footer'>
          <van-stepper @change='change' integer v-model="list[index].quantity" min="0" :max="item.product.quantity" />
        </div>
        </van-card>
      </van-checkbox>

    </van-checkbox-group>
    <van-submit-bar
      :price="allPrice"
      button-text="提交订单"
      @submit='onSubmit'
    >
      <van-checkbox class="qx" @click='btn' v-model="checked">{{text}}</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import * as get from '@/api/getProList.js';
import * as post from '@/api/postProList.js';
export default{
    name:'Cars',
    data(){
      return{
        people:'',
        addr:'',
        list:[],
        result: [],
        allPrice:0,
        kyy:[],
        checked:false,
        text:'全选'
      }
    },
    methods:{
      btn(){
        if(this.text == '全不选'){
          this.result = []
        }
      },
      showPopup(){
        this.show = true;
      },
      change(){
        this.result=[]
      },
      onClickLeft(){
        this.$router.push('/mine')
      },
      onSubmit(){
        this.kyy=[];
        for(var index in this.result){
          // 对选中的物品进行遍历，将数量变为外部的quantity
          this.result[index].product.quantity=this.result[index].quantity;
          let obj={
            quantity:this.result[index].product.quantity,
            product:this.result[index].product._id,
            price:(this.result[index].product.price*100)/100
          }
          this.kyy.push(obj)
        }
        post.pubProducts({
          receiver:this.people,
          regions:this.addr,
          address:this.addr,
          orderDetails:this.kyy
        }).then(res=>{
          if(res.status == 200){
            this.$toast('订单提交成功')
            // 提交订单成功，删除选中的商品
            this.result.map(item => {
               get.delCarsInfo({id:item._id}).then(res=>{
                 if(res.status == 200){
                   // console.log('删除成功')
                 }else{}
               })
            })
            this.$router.push('/mine')
          }else{
          }
        })
      }
    },
    mounted () {
      get.getCarsInfo({}).then(res=>{
        if(res.status == 200){
          this.list = res.data;
        }
      });
      let msg=this.$route.query;
      this.people = msg.name?msg.name:'';
      this.addr = msg.address?msg.address:'';
    },
    watch:{
      'result':function(){
        this.allPrice=0;
        this.result.map((value,index)=>{
          this.allPrice += (value.product.price*value.quantity*10000)/100
        });
        if(this.result.length == this.list.length){
          this.checked = true;
        }else{
          this.checked = false;
        }
      },
      'checked':function(){
        let checked = this.checked;
        if(checked == true){
          this.result = this.list;
          this.text = '全不选'
        }else{
          this.text = '全选'
        }
      }
    }
}
</script>

<style scoped>
.van-cell__title{
  text-align: left;
}
.pro{
    width: 280px;
    margin-bottom: 5px;
    background: #fff;
    text-align: left;
}
.ico{
    margin-left: 10px;
}
.name{
    text-align: left;
}
.dz{
    color: #323233;
    font-size: 14px;
}
.qx{
  margin-left: 12px;
}
</style>
